<template>
  <div class="border w-full center~ rounded flex">
    <input class="flex-1 h-35px py-3px px-5px box-border"
           v-model="value"
           :placeholder="placeholder"/>
    <div class="flex-none p-5px box-border text-gray-400">
      <div class="i-carbon-search cursor-pointer" @click="onSearch"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  placeholder?: string
}

const emits = defineEmits(["search"])
const rawProps = defineProps<Props>()
const {placeholder} = toRefs(rawProps)
const value = ref("")

function onSearch() {
  if (value.value === "") return
  emits("search", value.value)
}
</script>

<style scoped>
.border {
  border: 1px solid var(--gray);
}

input {
  border: none;
  outline: none;
}

input::placeholder {
  font-size: 12px;
  color: var(--gray);
}
</style>